import Vue from 'vue'

new Vue({

  el: '#root',

  // template里面只能有一个 div 节点里面可以有无限多 ，
  // 但是最外面只能是一个div
  template: `
    <!--<div :id="text">-->
    <!--<div v-text="'Text: ' + text1"></div>-->
    <div>
      
      <!-- @click="" 就是 v-on:click=""
      如果是html addActionListener
      如果是组件就相当于 $on 
      -->
      
      <!-- 直接在html中写 vue代码 -->
      <!--<div v-cloak>-->
      
      <!-- 数据仅绑定一次, 以后再有变化也不改了 v-once都不需要再更新了 -->
      <div v-once>Text: {{text2}}</div>
      
      <!-- 保持原字符串不变 -->
      <div v-pre>{{text2}}</div>
      
      <!-- 绑定到text这个值上 -->
      <!--<input text="text" v-model="text2"><input type="checkbox" v-model="active"/>-->
      
      <!--<input text="text" v-model.number="text2">-->
      
      <!-- 前后去空格 -->
      <!--<input text="text" v-model.trim="text2">-->
      
      <!-- lazy 离开焦点后 触发事件，而不是每次按下按钮 -->
      <input text="text" v-model.lazy="text2"/>
      
      <!-- 复选框 -->
      <div>
        <input type="checkbox" :value="1" v-model="arr"/>
        <input type="checkbox" :value="2" v-model="arr"/>
        <input type="checkbox" :value="3" v-model="arr"/>
      </div>
      
      
      <!-- 单选框 -->
      <div>
        <input type="radio" value="one" v-model="picked"/>
        <input type="radio" value="two" v-model="picked"/>
      </div>
      
      <div v-text="hello"></div>
      <div v-html="hello"></div>
      
      <!-- v-show 性能 比 v-if 好 -->
      <div v-show="active">{{text1}}</div>
      
      <!-- v-if 动态增删节点，性能不如v-show -->
      <div v-if="active">{{text2}}</div>
      <!-- 和 v-if是在一起用的 -->
      <div v-else-if="text1 === 2"> else if </div>
      <!-- v-if 和 v-else 必须是连在一起的 -->
      <div v-else>else content</div>
      
      <!-- 遍历数组 -->
      <ul>
        <li v-for="(item, index) in arr" :key="item">{{item}} -> {{index}}</li>  
      </ul>
      
      <!-- 遍历对象 -->
      <ul>
        <li v-for="(v, k, index) in obj" >{{k}} -> {{v}} -> {{index}}</li> 
      </ul>
      
    </div>
  `,
  data: {
    arr: [1, 2, 3],
    obj: {
      name: '123',
      email: '2@d.com',
      password: '123456'
    },
    picked: '',
    text1: 2,
    text2: 2,
    active: true,
    hello: `
      <p>hello</p>
    `,
  }

})
